iT邦幫忙

2024 iThome 鐵人賽

DAY 22
0
Modern Web

ASP.NET Core的終極奧義:從零到無敵系列 第 22

Day_22 使用AJAX實現無刷新操作

  • 分享至 

  • xImage
  •  

AJAX是一種能夠在不重新加載整個頁面的情況下,從伺服器獲取數據並更新頁面的技術。透過AJAX技術,我們可以大幅提升應用的交互體驗。本篇將介紹如何在ASP.NET Core中實現AJAX操作,並展示無刷新數據交互的實作方法。

1. AJAX的基本概念

AJAX(非同步JavaScript和XML)允許我們在背景中與伺服器進行交互,而不需要重新載入整個頁面。這對於提供流暢的使用者體驗至關重要,因為用戶能夠立即看到他們操作的結果,而無需等待頁面重新載入。

2. 設定ASP.NET Core後端以支援AJAX

在ASP.NET Core中,我們需要一個API端點來處理AJAX請求。以下是一個簡單的API控制器範例,它返回一個隨機數據:

using Microsoft.AspNetCore.Mvc;

namespace YourNamespace.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class DataController : ControllerBase
    {
        [HttpGet]
        public IActionResult GetRandomNumber()
        {
            Random random = new Random();
            var randomNumber = random.Next(1, 100);
            return Ok(randomNumber);
        }
    }
}

這個DataController包含一個GET請求的端點,返回一個介於1到100之間的隨機數。

3. 在前端使用AJAX請求
為了從上述API獲取數據,我們可以使用JavaScript中的AJAX。這裡展示了如何使用jQuery來發送AJAX請求:

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX無刷新操作</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>隨機數生成器</h1>
    <button id="getRandomNumber">獲取隨機數</button>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            $('#getRandomNumber').click(function() {
                $.ajax({
                    url: '/Data',
                    type: 'GET',
                    success: function(data) {
                        $('#result').text('隨機數:' + data);
                    },
                    error: function(xhr) {
                        console.error('錯誤:', xhr);
                    }
                });
            });
        });
    </script>
</body>
</html>

在這段代碼中,我們設置了一個按鈕,用於觸發AJAX請求。當用戶點擊按鈕後,AJAX請求會發送到後端API並獲取隨機數,然後將結果顯示在頁面上。

4. 無刷新更新頁面內容
AJAX的優點在於它可以無刷新地更新頁面內容。在這個示例中,當用戶點擊“獲取隨機數”按鈕時,頁面不會完全重新載入,而是僅更新#result的內容,這樣用戶可以即時看到結果。

5. 優化AJAX請求
使用AJAX時,可以考慮以下優化措施:

  • 錯誤處理:確保處理請求中的錯誤以增強用戶體驗。
  • 載入指示器:在請求進行中的時間顯示進度指示器,告知用戶正在處理的狀態。
  • 請求緩存:對頻繁請求的數據進行緩存以減少伺服器負擔。
  • 使用Promise:使用原生Promise語法來處理非同步請求,使代碼更可讀。

6. 小結
AJAX技術在現代Web應用中扮演著至關重要的角色。通過ASP.NET Core的後端支援以及jQuery或原生JavaScript的AJAX請求,我們能夠實現流暢、不需要重新載入頁面的數據交互,進一步提升用戶體驗。

在接下來的文章中,我們將探討如何使用前端驗證與數據綁定,讓應用更加健壯。敬請期待!


上一篇
Day_21 整合前端框架如Bootstrap或Tailwind CSS
下一篇
Day_23 使用前端驗證與數據綁定
系列文
ASP.NET Core的終極奧義:從零到無敵30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言